<template>
    <el-form label-position="left" :model="adminEdit" ref="adminEdit" label-width="80px" size="mini" style="padding:20px">
        <el-form-item label="登陆用户名">
            <el-input v-model="adminEdit.username" placeholder="请输入登陆用户名" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="adminEdit.name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="adminEdit.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
                <img v-if="adminEdit.headimg" :src="adminEdit.headimg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="签名">
            <el-input type="textarea" v-model="adminEdit.remarks" placeholder="请输入签名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click.native="close">取消</el-button>
            <el-button type="primary" @click.native="submit" :loading="loading">确定</el-button>
        </el-form-item>
        </el-row>
    </el-form>
</template>
<script>
import C from '#/src/common/common.js'
import AdminEdit from '#/src/organization/adminEdit.js'
import * as qiniu from 'qiniu-js'

export default {
    name: 'admin_changepas',
    data() {
        return {
            dialogVisible: false,
            adminEdit: {
                username: '',
                name: '',
                phone: '',
                remarks: '',
                dialogImageUrl: '',
                id: '',
                headimg: ''
            },
            file: '',
            loading: false,
            initialConditions: {}
        }
    },
    mounted: function() {
        this.getmsg()
    },
    methods: {
        async getmsg() {
            let data = await AdminEdit.getAdmininfo({})
            if (data) {
                this.adminEdit.username = data.username
                this.adminEdit.name = data.name
                this.adminEdit.phone = data.phone
                this.adminEdit.remarks = data.remarks
                this.adminEdit.dialogImageUrl = data.headimg
                this.adminEdit.id = data.id
                this.adminEdit.headimg = data.headimg
            }
        },
        async submit() {
            if (!(/^[\u4e00-\u9fa5]{2,4}$/.test(this.adminEdit.name))) {
                C.error('用户名为2到4个汉字')
                return false
            } else if (!(/^1[345678]\d{9}$/.test(this.adminEdit.phone))) {
                C.error('手机号不正确')
                return false
            }
            let that = this
            // 如果图片有变动开始上传图片
            if (this.file.name) {
                this.loading = true
                // 开始获取上传的token
                let token = await AdminEdit.getToken({})
                let keyName = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate() + '/' + this.file.name
                let observable = qiniu.upload(this.file.raw, keyName, token.uptoken)
                observable.subscribe({
                    next(res) {
                        console.log(res)
                    },
                    error(err) {
                        this.loading = false
                        that.$message.error('上传失败！')
                    },
                    complete(res) {
                        console.log(res)
                        // 上传成功后开始提交表格
                        that.adminEdit.headimg = `http://odfb8y4in.bkt.clouddn.com/${res.key}`
                        that.submitForm()
                    }
                })
            } else {
                that.submitForm()
            }
        },
        async submitForm(res) {
            let data = await AdminEdit.getEdit(this.adminEdit, 'post')
            if (data) {
                if (data.errno === 0) {
                    this.loading = false
                    this.$message({
                        message: data.data.info,
                        type: 'success'
                    })
                    this.passwordInfo = { ...this.initialConditions }
                } else {
                    this.loading = false
                    this.$message.error(data.errmsg)
                }
            }
        },
        async changeImg(file, fileList) {
            console.log(file)
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/gif'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片格式错误!')
                return
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
                return
            }
            this.file = file
            this.adminEdit.headimg = file.url
        },
        close() {
            C.closeBrowserWindow()
        }
    }
}
</script>
<style>
.form-group {
    display: block;
}

.form-control {
    background-color: #cecece;
}

.avatar-uploader .avatar-uploader-icon,
.avatar-uploader .avatar {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>